import 'package:city_pickers/city_pickers.dart';
import 'package:city_pickers/modal/result.dart';
import 'package:fluro/fluro.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:flutter_switch/flutter_switch.dart';
import 'package:shenfuhui/config/config.dart';

import '../routers/routers.dart';
import '../views/dialog_manager.dart';

///
/// 商品分类
///
class ProductClassifyPage extends StatefulWidget {
  const ProductClassifyPage({Key? key}) : super(key: key);

  @override
  State<ProductClassifyPage> createState() => _ProductClassifyPageState();
}

class _ProductClassifyPageState extends State<ProductClassifyPage> {
  var _classifyList = [];
  int _classifyIndex = 0;

  var _secondList = [];

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    setState(() {
      _classifyList.add('推荐商品');
      _classifyList.add('中外名酒');
      _classifyList.add('电子数码');
      _classifyList.add('母婴用品');
      _classifyList.add('家具家电');
      _classifyList.add('服装鞋袜');

      _secondList.add('');
      _secondList.add('');
      _secondList.add('');
      _secondList.add('');
      _secondList.add('');
      _secondList.add('');
      _secondList.add('');
      _secondList.add('');
    });
  }

  ///
  /// 返回普通的列表item
  ///
  Widget getListItem(int index) {
    return Container(
      height: 100.w,
      margin: EdgeInsets.only(left: 8.w),
      decoration: BoxDecoration(
        color: _classifyIndex == index ? Config.colorBg2 : Config.colorWhite,
        borderRadius: BorderRadius.only(
            topLeft: Radius.circular(15.w), bottomLeft: Radius.circular(15.w)),
      ),
      width: double.infinity,
      child: InkWell(
        onTap: () {
          setState(() {
            _classifyIndex = index;
          });
        },
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Text(
              _classifyList[index],
              style: TextStyle(
                  fontSize: _classifyIndex == index ? 27.sp : 24.sp,
                  color: Config.colorText1),
            ),
          ],
        ),
      ),
    );
  }

  ///
  /// 返回普通的列表item
  ///
  Widget getSecondList(int index) {
    return Container(
      margin: EdgeInsets.symmetric(vertical: 25.w),
      decoration: const BoxDecoration(
        color: Config.colorWhite,
      ),
      width: 100.w,
      child: InkWell(
        onTap: () {
          Routes.router.navigateTo(context, Routes.productList,
              transition: TransitionType.inFromRight);
        },
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            ClipRRect(
              borderRadius: BorderRadius.circular(12.w),
              child: Image.network(
                "https://pic1.zhimg.com/v2-6438843a4cbae9184b935a75a5059ac6_1440w.jpg?source=172ae18b",
                fit: BoxFit.fill,
                width: 100.w,
                height: 100.w,
              ),
            ),
            Padding(
              padding: EdgeInsets.only(top: 12.w),
            ),
            Text(
              "白酒",
              style: TextStyle(fontSize: 24.sp, color: Config.colorText1),
            ),
          ],
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Config.colorBg2,
        appBar: AppBar(
          title: const Text('商品分类'),
          centerTitle: true,
        ),
        body: Container(
          width: double.infinity,
          height: double.infinity,
          child: Row(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Container(
                decoration: BoxDecoration(color: Config.colorWhite),
                width: 200.w,
                height: double.infinity,
                child: ListView.builder(
                  shrinkWrap: true,
                  physics: const BouncingScrollPhysics(),
                  itemCount: _classifyList.length,
                  padding: EdgeInsets.symmetric(vertical: 0.w, horizontal: 0.w),
                  itemBuilder: (BuildContext context, int index) {
                    return getListItem(index);
                  },
                ),
              ),
              Container(
                decoration: BoxDecoration(
                  color: Config.colorWhite,
                  borderRadius: BorderRadius.circular(15.w),
                ),
                width: 500.w,
                margin: EdgeInsets.all(25.w),
                height: double.infinity,
                child: GridView.builder(
                  shrinkWrap: true,
                  physics: const BouncingScrollPhysics(),
                  itemCount: _secondList.length,
                  padding: EdgeInsets.symmetric(vertical: 0.w, horizontal: 0.w),
                  itemBuilder: (BuildContext context, int index) {
                    return getSecondList(index);
                  },
                  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                      crossAxisCount: 3,
                      mainAxisSpacing: 0.w,
                      crossAxisSpacing: 0.w,
                      childAspectRatio: 0.82),
                ),
              )
            ],
          ),
        ));
  }
}
